<template>
  <div class="wrapper">
    <img :src="logo">
    <shopping-cart>
      <template #default="slotProps">
        <!-- 展示商品条目 -->
        <cart-item v-for="(item,index) in slotProps.items" 
                   :item="item" 
                   :ordinal="index+1"
                   :key="item.id"></cart-item>
        <!-- 展示商品总价格 -->
        <cart-total :items="slotProps.items"></cart-total>
      </template>
    </shopping-cart>
  </div>
</template>

<script>
// 将图片当作模块来导入
import logo from '@/assets/logo.jpg';

export default {
  name: 'App',
  data(){
    return {
      logo: logo
    }
  }
}
</script>

<style>
.wrapper {
  border: 1px solid gray;
  text-align: center;
}
.wrapper>img {
  width: 10vw;
}
</style>
